import React, { Component } from 'react';
import {
  Text,
  View,
 TextInput,
 ScrollView,
 Image,
 Button,
 ImageBackground,
 TouchableHighlight,
 TouchableNativeFeedback,
 TouchableOpacity,
 TouchableWithoutFeedback
} from 'react-native';
import { StackNavigator} from 'react-navigation';

export default class InputScreen extends React.Component{
    static navigationOptions={
        title:'Input',
    };

    constructor(props){
        super(props);
        this.state={text:''}
    }

    _onPressButton(){
       alert('点击图片')
    }

    _onLongPressButton(){
        alert('长按事件')
    }

    render(){
        const {navigate}=this.props.navigation;

        return(
            <ScrollView 
             //horizontal=''
             pagingEnabled={true}
            >
           <View style={{
               paddingLeft:10,
               paddingTop:10,
               paddingRight:10,
               paddingBottom:10
               }}>
            <TextInput
                 style={{height:40}}
                 placeholder='Type here to translate'
                 onChangeText={(text)=>this.setState({text})}
            />
            <Text style={{padding:10,fontSize:42}}>
                {this.state.text.split(' ').map((word)=>word&&'口').join(' ')}    
            </Text>
            <Button
              onPress={()=>navigate('FlatList',{user:'jack'})}
              title='跳转到FlatList'
            />  
            <Button
              onPress={()=>navigate('Animate',{user:'jack'})}
              title='跳转到Animate'
            />   
            <ImageBackground 
            source={require('./img/a5188968.jpg')} 
            style={{width:200,height:30}}>
            <Text style={{fontSize:24}}>Scroll me pls</Text>
            </ImageBackground>
            <TouchableHighlight onPress={this._onPressButton}  onLongPress={this._onLongPressButton}>
            <Image source={require('./img/213-1411240SK70.jpg')}/>
            </TouchableHighlight>
            <TouchableNativeFeedback onPress={this._onPressButton}>
            <Image source={require('./img/213-1411240SK70.jpg')}/>
            </TouchableNativeFeedback>
            <TouchableOpacity onPress={this._onPressButton}>
            <Image source={require('./img/213-1411240SK70.jpg')}/>
            </TouchableOpacity>
            <Text style={{fontSize:24}}>If you like</Text>
            <TouchableWithoutFeedback onPress={this._onPressButton}>
            <Image source={require('./img/a5188968.jpg')}/>
            </TouchableWithoutFeedback>
            <Image source={require('./img/a5188968.jpg')}/>
            <Image source={require('./img/a5188968.jpg')}/>
            <Text style={{fontSize:24}}>Scroll me pls</Text>
            <Image source={require('./img/213-1411240SK70.jpg')}/>
            <Image source={require('./img/213-1411240SK70.jpg')}/>
            <Image source={require('./img/213-1411240SK70.jpg')}/>
            <Text style={{fontSize:24}}>If you like</Text>
            <Image source={require('./img/a5188968.jpg')}/>
            <Image source={require('./img/a5188968.jpg')}/>
            <Image source={require('./img/a5188968.jpg')}/>
           </View>
           </ScrollView>
        );
    }
}